<template>
	<view style="width: 100%;height: 100%;">
		<editor class="ql-container" :adjust-position="false" :placeholder="placeholder" :show-img-size="true" :show-img-toolbar="true"
			:show-img-resize="true" @ready="onEditorReady" id="editor" @focus="editFocus" @input="editInput"
			@blur="editBlur" ref="editot"></editor>

		<view class="buttom" :style="{bottom:[inputOffsetBottom>0?inputOffsetBottom:0]+'px'}">
	<!-- 		<view v-if="tool" class="butoom-btn">
				<view class="showbtn">
					<view @click="seteditor('bold')"><i :class="{selcolor:name=='bold'}" class="iconfont iconbold"></i>
					</view>
					<view @click="seteditor('italic')"><i :class="{selcolor:name=='italic'}" class="iconfont iconi"></i>
					</view>
					<view @click="seteditor('align','left')"><i :class="{selcolor:name=='left'}"
							class="iconfont iconyouduiqicopy"></i></view>
					<view @click="seteditor('align','center')"><i :class="{selcolor:name=='center'}"
							class="iconfont iconjuzhong"></i></view>
					<view @click="seteditor('align','right')"><i :class="{selcolor:name=='right'}"
							class="iconfont iconzuoduiqi"></i></view>
					<view @click="seteditor('list','bullet')"><i :class="{selcolor:name=='bullet'}"
							class="iconfont icon4liebiao"></i></view>
					<view @click="seteditor('list','ordered')"><i :class="{selcolor:name=='ordered'}"
							class="iconfont iconyouxuliebiao"></i></view>
				</view>
			</view> -->

			<view class="toolbtn">
				<view @click="insertImage"><i class="iconfont icontupian"></i></view>
				<view @click="insertVideo"><i class="iconfont iconshipin2"></i></view>
				<view @click="toolshow">
					<view v-if="tool" class="butoom-btn">
						<view class="showbtn">
							<view @click="seteditor('bold')"><i :class="{selcolor:name=='bold'}" class="iconfont iconbold"></i>
							</view>
							<view @click="seteditor('italic')"><i :class="{selcolor:name=='italic'}" class="iconfont iconi"></i>
							</view>
							<view @click="seteditor('align','left')"><i :class="{selcolor:name=='left'}"
									class="iconfont iconyouduiqicopy"></i></view>
							<view @click="seteditor('align','center')"><i :class="{selcolor:name=='center'}"
									class="iconfont iconjuzhong"></i></view>
							<view @click="seteditor('align','right')"><i :class="{selcolor:name=='right'}"
									class="iconfont iconzuoduiqi"></i></view>
							<view @click="seteditor('list','bullet')"><i :class="{selcolor:name=='bullet'}"
									class="iconfont icon4liebiao"></i></view>
							<view @click="seteditor('list','ordered')"><i :class="{selcolor:name=='ordered'}"
									class="iconfont iconyouxuliebiao"></i></view>
						</view>
					</view>
					<i class="iconfont iconwenzi1"></i>
				</view>
				<view @click="insetText"><i class="iconfont iconjinghao"></i></view>
				<!-- <view><i class="iconfont icontabAdd"></i></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// inputOffsetBottom: 0,
				editorCtx: '',
				placeholder: '请输入内容',
				name: '',
				tool: false,
				imglist: []
			}
		},
		props: {
			inputOffsetBottom:Number,
			content: String
		},
		created() {
			// uni.onKeyboardHeightChange(res => {
			// 	this.inputOffsetBottom = res.height
			// 	console.log(this.inputOffsetBottom,"===========");
			// 	if (res.height === 0) {
			// 		this.focus = false
			// 	} else {
			// 		this.focus = true;
			// 	}
			// })
		},
		methods: {
			editFocus: function() {
				this.tool = false;
			},
			editInput: function(e) {
				this.$emit('editInput', e);
				this.setImg(e.detail.html);
			},
			// 正则匹配img标签将所有img的src放入数组
			setImg(value) {
				var htmlTxt = value;
				let imgs = [];
				htmlTxt = htmlTxt.replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
					imgs.push(capture);
				});
				this.$emit('getimg', imgs);
			},
			editBlur: function(e) {},
			toolshow: function() {
				this.tool = !this.tool;
			},
			seteditor: function(name, value) {
				if (!name) return
				if (!value) {
					if(this.name==name){
						this.name ="";
					}else{
						this.name = name;
					}
				} else {
					if(this.name==value){
						this.name ="";
					}else{
						this.name = value;
					}
				}
				this.editorCtx.format(name, value)
			},
			onEditorReady() {
				console.log(this.content, "==");
				uni.createSelectorQuery().in(this).select('.ql-container').fields({
					size: true,
					context: true
				}, res => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({
						html: this.content
					})
					this.setImg(this.content);
				}).exec();
			},
			// 插入图片
			insertImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						})
						for (let temp of tempFilePaths) {
							_this.$uapi.apifile('api/v1/upload', {
								file: temp
							}).then(re => {
								let result = JSON.parse(re.data);
								_this.editorCtx.insertImage({
									src: result.data.fileUrl, // 此处需要将图片地址切换成服务器返回的真实图片地址
									alt: '图片',
									success: function(e) {}
								});
								uni.hideLoading()
							});
						}
					}
				});
			},
			// 强制初始化编辑器
			insetCont: function(value) {
				this.editorCtx.clear(); //清空编辑器
				this.editorCtx.setContents({
					html: value
				})
				this.setImg(value);
				this.$forceUpdate();
			},
			insetText: function(value) {
				var val = '#';
				if(value) {
					val = value
				}
				this.editorCtx.insertText({
					text: val
				})
			},
			/* 插入视频 */
			insertVideo() {
				var _this = this;
				uni.chooseVideo({
					count: 1,
					success: res => {
						uni.showLoading({
							title: '上传中'
						});
						_this.$api.apifile('user/currency.basic/UploadVideo', {
							file: res.tempFilePath
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								var url = result.data.visit_path;
								var cont = '[#' + url + '#]';
								_this.editorCtx.insertText({
									text: cont,
									success: function(res) {}
								});
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
							uni.hideLoading();
						})
					}
				});
			},
		},
		watch: {
			// content(newValue) {
			// 	this.content = newValue;
			// 	this.editorCtx.setContents({
			// 		html: this.content
			// 	})
			// }
		}

	}
</script>

<style lang="scss">
	.ql-container {
		padding:30upx 20upx;
		top: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 240upx;
	}

	.buttom {
		position: fixed;
		width: 100%;
		bottom: 0upx;
		z-index: 9999;
	}

	.butoom-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -65upx;
		left: 230upx;

		.showbtn {
			position: relative;
			margin: auto;
			width: 480upx;
			height: 78upx;
			border-radius: 78upx;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12);
			display: flex;
			justify-content: space-around;
			align-items: center;
			z-index: 9999;

			.selcolor {
				color: #00D5A2;
			}
		}

	}

	.showbtn::before {
		position: absolute;
		bottom: -10upx;
		left: 230upx;
		content: '';
		width: 20upx;
		height: 20upx;
		background: #fff;
		transform: rotate(135deg);
		box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
	}

	.showbtn::after {
		position: absolute;
		bottom: 0upx;
		left: 225upx;
		content: '';
		width: 30upx;
		height: 20upx;
		background: #fff;
	}

	.toolbtn {
		background-color: #FFFFFF;
		width: 100%;
		height: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.12);

		i {
			font-size: 36upx;
			color: #333333;
		}
	}
</style>
